<template>
	<view class="ranking">
		<view :class="['ranking-top',isMobile?'flex-center flexdc alic':'flex-between-nowrap'] ">
			<template v-if="getIsTeamLeader">
				<u-tabs :list="tabLeft.list"
					v-if="isMobile"
					 :current="tabLeft.index"
					 :itemStyle="{
						  height:'62px',
						  fontSize:'16px',
						  width:'100%'
					 }"
					 :activeStyle="{
						  background: 'none',
						  fontWeight: 'bold',
						  width: '100%',
						  height: '100%',
						  textAlign:'center',
						  lineHeight: '62px',
					 }"
					 @click="changeTabMobile"></u-tabs>
				<view class="ranking-top-tab flex-start-nowrap alic" v-if="!isMobile">
					<view :class="['ranking-top-tab-item ranking-top-tab-item-left plr38 cup',tabLeft.index == index && 'active']" 
					@click="changeTab(item,index)"
					v-for="(item,index) in tabLeft.list" :key="index">
						{{item.name}}
					</view>
				</view>
			</template>
			<template>
				<view></view>
			</template>
			<view :class="['ranking-top-tab flex-start-nowrap alic',isMobile?'ranking-top-tab-mb':'']">
				<view :class="['ranking-top-tab-item ranking-top-tab-item-right plr20 flex-center flexdc cup',tabRight.index == index && 'active']" 
				@click="changeTabRight(item,index)"
				v-for="(item,index) in tabRight.list"  :key="index">
					<text>{{item.name}}</text>
					<!-- yyyy-MM-dd HH:mm:ss -->
					<text class="ranking-top-tab-item-time" v-if="index == 0">{{yesteDay}}</text>
					<text class="ranking-top-tab-item-time" v-if="index == 1">{{dateFormat(new Date(new Date().getTime() - (3600 * 1000 * 24 * (new Date().getDay() == 0 ? 6 : new Date().getDay()-1))),'M月dd')}} - {{dateFormat(new Date(new Date().getTime()+(3600*1000*24* (new Date().getDay()==0 ? 0:7- new Date().getDay()))),'M月dd') }}</text>
					<text class="ranking-top-tab-item-time" v-if="index == 2">{{dateFormat(new Date(),'M月')}}</text>
					<text class="ranking-top-tab-item-time" v-if="index == 3">-</text>
				</view>
			</view>
		</view>
		
		<view class="ranking-list m0a">
			<view class="ranking-list-time tac" >
				排行榜更新时间倒计时：<text class="cff3">
					<u-count-down
						:time="dayTime"
						format="HH:mm:ss"
						autoStart
					></u-count-down>
				</text>
			</view>
			<view class="ranking-list-rank flex-center">
				<view :class="['ranking-list-rank-box','ranking-list-rank-box' + index]"
				 v-for="(item,index) in rankingTopTable" :key="index">
					<view :class="['ranking-list-rank-box-img','ranking-list-rank-box-img' + index] ">
						<u-avatar
						:size="isMobile?'108rpx':'108px'"
						shape="circle"
						:src="item.avatar ? item.avatar + '?x-oss-process=image/resize,w_200'  : '/static/images/login/avatar.png'"
						mode="aspectFill">
						</u-avatar>
					</view>
					<view class="ranking-list-rank-box-text flexdc flex-center">
						<text>{{item.nick_name || item.team_nick_name || item.team_number}}</text>
						<text class="cff7">{{item.des}}芝草</text>
					</view>
				</view>
			</view>
			<view class="ranking-list-table ">
				<view class="flex-between-nowrap ranking-list-table-tr">
					<view class="ranking-list-table-td">当前排名</view>
					<view class="ranking-list-table-td">{{ tabLeft.index == 0?'宅小职':'团长' }}昵称</view>
					<view class="ranking-list-table-td">{{tabLeft.index == 1 ? '团队':''}}获得芝草</view>
				</view>
				<view class="flex-between-nowrap ranking-list-table-tr" v-for="(item,index) in rankingTable" :key="index">
					<view class="ranking-list-table-td">{{item.number}}</view>
					<view class="ranking-list-table-td">{{item.nick_name || item.team_nick_name || item.team_number}}</view>
					<view class="ranking-list-table-td">{{item.des}}芝草</view>
					
				</view>
				<u-sticky :style="{top:'auto',bottom:0,zIndex:1}">
					<view class="flex-between-nowrap ranking-list-table-tr" style="background: #f3fbfe;" v-if="userRank">
						<view class="ranking-list-table-td">排名：{{userRank.number || '50+'}}</view>
						<view class="ranking-list-table-td">{{userRank.nick_name || userRank.team_number || 0}}</view>
						<view class="ranking-list-table-td">{{userRank.des || 0}}芝草</view>
					</view>
				</u-sticky>
				
				
			</view>
			<!-- mode="data" -->
			<u-empty
				v-if="!rankingTable.length"
				:class="['ranking-empty']"
				icon="/static/images/projectDetail/no-data.png"
				text="数据暂未更新，请等待更新后再来~"
				size="40" >
			</u-empty>
			
		</view>
	</view>
</template>

<script>
	import {
		dateFormat
	} from "@/utils/index.js"
	export default {
		data() {
			return {
				tabLeft:{
					index:0,
					list:[
						{
							name:'个人',
							cmd:'userIncomeRank',

						},{
							name:'团队',
							cmd:'teamIncomeRank',
						},
					]
				},
				tabRight:{
					index:0,
					list:[
						{
							name:'日榜',
							id:'1',
							
						},{
							name:'周榜',
							id:'2',
						},{
							name:'月榜',
							id:'3',
						},{
							name:'总榜',
							id:'',
						},
					]
				},
				rankingTopTable:[],
				rankingTable:[],
				tabLeftItem:{},
				tabRightItem:{},
				dayTime:0,
				yesteDay:'',
				userRank:{},
			}
		},
		mounted() {
			this.dayTime = (new Date(new Date().toLocaleDateString()).getTime()+(24*60*60*1000-1) - new Date() * 1)*1
			// this.yesteDay = dateFormat(new Date(),'M月dd',-1)
			this.yesteDay = dateFormat(new Date(),'M月dd')
			setInterval(()=>{
				this.dayTime = this.dayTime - 1000
			},1000)
			this.tabLeftItem = this.tabLeft.list[0]
			this.tabRightItem = this.tabRight.list[0]
			this.getPageList()
		},
		onPageScroll(e) {
			console.log(e)
			// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
		},
		methods: {
			changeTabMobile(e){
				this.tabLeft.index = e.index
				this.tabLeftItem = e
				this.getPageList()
			},
			changeTab(item,index){
				this.tabLeft.index = index
				this.tabLeftItem = item
				this.getPageList()
			},
			changeTabRight(item,index){
				this.tabRight.index = index
				this.tabRightItem = item
				this.getPageList()
			},
			dateFormat(val,format = 'yyyy-MM-dd HH:mm:ss'){
				 return dateFormat(val,format)
			},
			getPageList(){
				let par ={
					type: this.tabRightItem.id
				}
				let cmd =  this.tabLeftItem.cmd
				this.$api[cmd](par).then(res => {
					if(res.code == 200){
						this.rankingTopTable = []
						this.rankingTable = []
						let datas = res.data.list || []
						this.userRank = res.data.userRank
						datas = datas.filter(el => {
							return Number(el.des) > 0
						})
						datas.map(item => {
							if(item.des){
								item.des = item.des.replace(/\.00/,'')
							}
						})
						if(datas.length <= 3){
							this.rankingTable = datas
						}
						if(datas.length > 3){
							this.rankingTable = datas.slice(3,datas.length)
							this.rankingTopTable = datas.slice(0,3)
							let rankingTopTable = JSON.parse(JSON.stringify(this.rankingTopTable)) 
							this.rankingTopTable[0] = rankingTopTable[1]
							this.rankingTopTable[1] = rankingTopTable[0]
							
						}
					
					}
				})
				
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.plr38{
		padding: 0px 38px;
		height: 100%;
		line-height: 100%;
		align-items: center;
		display: flex;
	}
	.plr20{
		padding: 12px 20px;
	}
	.ranking{
		
		&-empty{
			padding-top: 30px;
		}
		&-top{
			padding: 30px 25px;
			&-tab{
				border: 1px solid #EEF1F5;
				border-radius: 2px;
				&-item{
				
					&-time{
						font-size: 12px;
					}
				}
				&-item-right{
					width: 80px;
				}
				&-item:not(:last-child){
					border-right: 1px solid #EEF1F5;
				}
				.active{
					background: #26bbff;
					color:#fff;
				}
			}
		}
		&-list{
			padding: 30px 25px;
			max-width: 699px;
			padding-top: 48px;
			&-time{
				padding-bottom: 48px;
				flex-wrap: nowrap;
				display: flex;
				justify-content: center;
			}
			&-rank{
				background: url('@/static/images/income/top_bg.png') no-repeat center bottom;
				&-box{
					width: 210px;
					margin-bottom: 0px;
					position: relative;
					&-img{
						width: 108px;
						width: 108px;
						border: 5px solid #D7D7D7;
						border-radius: 50%;
						margin: 0 auto;
					}
					&-img1{
							border: 5px solid #FFD71F;
							
					}
					&-img2{
							border: 5px solid #C79364;
					}
					&-text{
						margin-top: 27px;
						font-weight: bold;
						text{
							margin-bottom: 16px;
						}
					}
					
				}
				&-box::after{
					content: '';
					position: absolute;
					width: 55px;
					height: 44px;
					top: -20px;
					left: calc(50% - 64px);
					transform: rotate(-7deg);
					background: url('@/static/images/income/top_2.png') no-repeat 0 0;
				}
				&-box1{
					margin-bottom: 90px;
					width: 228px;
					display: flex;
					justify-content: center;
					flex-direction: column;
					// margin-left: 100px;
					// margin-right: 100px;
				}
				&-box1::after{
					background: url('@/static/images/income/top_1.png') no-repeat 0 0;
				}
				&-box2{
					margin-bottom: -50px;
				}
				&-box2::after{
					background: url('@/static/images/income/top_3.png') no-repeat 0 0;
				}
				/deep/ .u-text__value{
					margin:  0 auto;
					word-break: break-all;
				}
			}
			&-table{
				line-height: 50px;
				border-top: 1px solid #EEF1F5;
				border-left: 1px solid #EEF1F5;
				&-tr{
					
				}
				&-td{
					@extend .ellipsis;
					width: 33%;
					text-align: center;
					border-right: 1px solid #EEF1F5;
					border-bottom: 1px solid #EEF1F5;
				}
			}
		}
	}
	@media screen and (min-width: 0px) and (max-width:750px){
		.ranking{
			/deep/ .u-tabs{
				width: 100%;
			}
			&-top{
				padding: 0;
				&-tab{
					width: 100%;
					&-item{
						width: 25%;
						padding-left: 0;
						padding-right: 0;
						text-align: center;
					}
					&-item-left{
						width: 50%;
					}
					
				}
			}
			&-list{
				&-rank{
					background: url('@/static/images/income/top_bg.png') no-repeat center bottom;
					background-size: 100% auto;
					&-box{
						width: 280rpx;
						margin-bottom: -20px;
						&-img{
							width: 108rpx;
							width: 108rpx;
						}
						&-text{
							margin-top: 27rpx;
							font-size: 24rpx;
							text{
								margin-bottom: 16px;
							}
						}
						
					}
					&-box::after{
						left: calc(50% - 53px);
						transform: rotate(-11deg);
					}
					&-box1{
						width: 160px;
						display: flex;
						justify-content: center;
						flex-direction: column;
						margin-bottom: 10rpx;
						
					}
				
					&-box2{
						margin-bottom: -80rpx;
						.ranking-list-rank-box-text{
							margin-top: 27rpx;
							font-size: 24rpx;
							margin-bottom: 16px;
							text{
								margin-bottom: 6px;
							}
						}
					}
					
					/deep/ .u-text__value{
						font-size: 28rpx !important;
					}
				}
			}
		}
	}
	.cff3{
		/deep/.u-count-down__text{
			color: #FF3B30 !important
		}
		
	}
</style>